<template>
  <div>
    <h1>路由懒加载</h1>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <hr>
    <input type="text" v-model="text">
    <p>{{text}}</p>
    <input type="text" v-model="person.name">
    <p>{{person.name}}</p>
  </div>
</template>

<script>
import Vue from 'vue';
import vueSwiper from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
Vue.use(vueSwiper);

export default {
  data() {
    return {
      msg: 'aabbcca',
      swiperOptions: {
        slidesPerView: 1, // 显示的数量
        spaceBetween: 30, // 每张的间距
        // pagination: { el: '.swiper-pagination' },
        //设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          /* 触摸滑动后是否继续轮播 */
          disableOnInteraction: false,
        },
        loop: true, // 无限轮播
      },
      text: 'input',
      person: {
        id: '1',
        name: '张三',
      },
    };
  },
  watch: {
    // https://www.cnblogs.com/baller/p/13396124.html
    text: {
      handler(newVal, oldVal) {
        console.log('oldVal', oldVal);
        console.log('newVal', newVal);
      },
      immediate: true,
    },
    'person.name': {
      handler(newVal, oldVal) {
        console.log('personOldVal', oldVal);
        console.log('personNewVal', newVal);
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    this.output(this.msg);
    console.log('Current Swiper instance object', this.swiper);
    this.swiper.slideTo(3, 1000, false);
  },
  methods: {
    /**
     * 实现一个函数
     * 输入字符串 'aabbcca'
     * 输出 [{a: 2, },{b: 2, },{c: 2,},{ a: 1}]
     */
    output(str) {
      let arr = str.split('');
      let result = [];
      let Findex = 0;
      arr.map((item, index) => {
        var obj = {};
        var Lindex = index + 1;
        if (arr[index] !== arr[index + 1]) {
          obj[item] = Lindex - Findex;
          result.push(obj);
          Findex = Lindex;
        }
      });
      console.log(result);
      return result;
    },
    /**
     * 统计数组中每个字符串出现次数
     * @param string[] strs: 字符串数组, 例如 ['aa', 'ab', 'ab', 'cc', 'cba']
     * @return {[key: string]: number} 出现次数对象, 例如 { aa: 1, ab: 2, cc: 1, cba: 1 }
     */
    countNum(param) {
      let result = {};
      param.map(item => {
        if(result.hasOwnProperty(item)) {
          result[item] = result[item] + 1;
        } else {
          result[item] = 1;
        }
      });
      console.log(result);
      return result;
    }
  },
};
</script>

<style lang="scss">
</style>